<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>tooltipster插件使用-方法的使用</title>
        <link rel="stylesheet" href="../css/reset.css" />
        <link rel="stylesheet" href="css/tooltipster.bundle.css" />
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/tooltipster201707121458/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css" />
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/tooltipster201707121458/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css" />
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/tooltipster201707121458/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css" />
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/tooltipster201707121458/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css" />
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/tooltipster201707121458/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css" />
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/tooltipster201707121458/dist/css/tooltipster-follower.min.css" />
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/demo/tooltipster201707121458/dist/css/tooltipster-follower.min.css" />
        <link rel="stylesheet" href="http://www.jq22.com/demo/tooltipster201707121458/dist/css/jquery-ui.min.css">
        <style>
            @media (max-width: 450px){
                section {
                    padding: 2em;
                }
                h2 {
                    font-size: 3em;
                    line-height: 1.2em;
                    margin-bottom: 0.23em;
                }
            }
            @media (max-width: 820px){
                section {
                    padding: 3em;
                }
            }
            section {
                width: 100%;
                margin: 0 auto;
                border-bottom: 2px dashed #e5eaeb;
                padding: 6em;
                background: #fff;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
            * {
                -webkit-transition: all 300ms;
                -moz-transition: all 300ms;
                -o-transition: all 300ms;
                -ms-transition: all 300ms;
                transition: all 300ms;
            }
            h2 {
                color: #a9b1b3;
                font-weight: 300;
                font-size: 4em;
                line-height: 1.4em;
                margin-bottom: 0.5em;
            }
            @media (max-width: 920px){
                #demos ul {
                    width: 100%;
                    padding: 0;
                }
            }
            @media (max-width: 1100px){
                #demos li {
                    width: 100%;
                }
            }
            #demos li {
                display: block;
                width: 50%;
                font-weight: 400;
                margin-bottom: 1em;
                padding-top: 1.4em;
                padding-right: 2em;
                position: relative;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                float: left;
            }
            #demos ul {
                display: block;
                width: 100%;
                font-size: 1.4em;
                line-height: 1.4em;
            }
            #demos span {
                display: block;
                border: 3px solid #ff5e3c;
                border-radius: 100%;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                width: 5em;
                height: 5em;
                background: #ff5e3c;
                color: #fff;
                font-size: 0.6em;
                line-height: 1em;
                font-weight: 700;
                padding: 1.8em 0 0 0;
                text-align: center;
                margin: -1.4em 1em 0 0;
                text-transform: uppercase;
                float: left;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                -webkit-user-select: none;
                user-select: none;
            }
            #demo-position-grid {
                border: 2px dashed lightgrey;
                border-bottom: none;
                box-sizing: border-box;
                display: inline-block;
                left: 80px;
                padding: 5px 20px;
                position: absolute;
                top: 20px;
                width: 220px;
            }
            #demo-complex {
                position: absolute;
            }
            #demo-complex-placeholder {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <section id="demos">
            <h2>Demos</h2>
            <ul>
                <li>
                    <span id="demo-default" title="Hi! I am a tooltip.">Hover</span> 默认设置
                </li>
                <li id="test">
                    <span id="demo-events" title="你可以通过键盘按键或点击任何地方关闭">Click</span> 自定义打开/关闭触发器
                </li>
                <li>
                    <span id="demo-html" data-tooltip-content="#demo-html-content">Hover</span> 一侧显示
                </li>
                <li>
                    <span id="demo-smart">Drag</span> 拖动,智能定位
                </li>
                <li>
                    <span id="demo-touch">Click</span> 鼠标、触摸和混合设备
                </li>
                <li>
                    <span id="demo-theme" title="Build custom themes and CSS powered animations!">Hover</span> 自定义主题 &amp; 动画
                </li>
                <li>
                    <span id="demo-callback" title="This will be populated by AJAX.">Hover</span> 自定义回调 (AJAX &lt;3)
                </li>
                <li>
                    <span id="demo-interact" title="Try clicking &lt;a href='http://google.com/' target='_blank'&gt;this link&lt;/a&gt;">Hover</span> 交互提示
                </li>
                <li>
                    <span id="demo-imagemap">
                        <img id="demo-imagemapped" src="http://www.jq22.com/demo/tooltipster201707121458/dist/images/star.png" usemap="#imagemap" />
                        <map name="imagemap">
                            <area id="demo-imagemaparea" title="The tooltip triggers only on a given image area" shape="poly" coords="20,17,26,0,32,17,48,16,36,29,40,45,27,36,11,45,16,29,2,17" />
                        </map>
                    </span> 支持图像映像 &amp; SVG
                </li>
                <li>
                    <span id="demo-multiple">Hover</span> 单个标签多元提醒
                </li>
                <li id="demo-complex-li">
                    <span id="demo-complex-placeholder"></span>
                    <span id="demo-complex" title="我已经被固定,尝试滚动鼠标,点击圆块取消">Click</span> 位置跟踪功能
                </li>
                <li>
                    <span id="demo-position" data-tooltip-content="#demo-position-content">Hover</span> <div id="demo-position-grid">Custom position</div>
                </li>
                <li>
                    <span id="demo-plugin" title="I use a plugin to follow the mouse!">Hover</span> 跟随鼠标
                </li>
                <li>...&amp; more!</li>
            </ul>
            <br class="clear" />
        </section>
        <div id="templates" style="display:none;">
            <div id="demo-html-content">
                <img src="doc/images/spiderman.png" width="50" height="50">
                <p style="text-align:left;">
                    <strong>Lorem ipsum dolor sit amet</strong><br>
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.
                </p>
            </div>
            <span id="demo-position-content">I'm the most accurate tooltip ever! Let me fit to your layout the way you want to. I'm great to create menus too :)</span>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="../fastclick/fastclick.js"></script>
        <script src="js/tooltipster.bundle.min.js"></script>
        <script type="text/javascript" src="http://www.jq22.com/demo/tooltipster201707121458/dist/js/tooltipster-follower.min.js"></script>
        <script type="text/javascript" src="http://www.jq22.com/demo/tooltipster201707121458/dist/js/tooltipster-discovery.min.js"></script>
        <script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
        <script type="text/javascript" src="http://www.jq22.com/demo/tooltipster201707121458/dist/js/jquery.ui.touch-punch.min.js"></script>

        <script>
        (function($){  
          $.extend({  
            jGFeed : function(url, fnk, num, key){  
              // Make sure url to get is defined  
              if(url == null) return false;  
              // Build Google Feed API URL  
              var gurl = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+url;  
              if(num != null) gurl += "&num="+num;  
              if(key != null) gurl += "&key="+key;  
              // AJAX request the API  
              // $.getJSON(gurl, function(data){  
              //   if(typeof fnk == 'function')  
              //       fnk.call(this, data.responseData.feed);  
              //   else  
              //       return false;  
              // });
              // var YqlUrl='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D"'+url+'"&amp;format=json&amp;diagnostics=true&amp;callback=?'
              var YqlUrl='http://query.yahooapis.com/v1/public/yql?q='+url+'&v=1.0&callback=?&q=';
              $.getJSON(YqlUrl,function(data){
                console.log(data);
                if(typeof fnk == 'function')  
                    fnk.call(this, data.responseData.feed);  
                else  
                    return false;
              })
            }  
          });  
        })(jQuery);
        $(function() {
            
            // menu
            
            $('header select').change(function() {
                var goTo = $(this).val();
                var section = $('#'+goTo);
                var offset = section.offset().top;
                $('html, body').scrollTop(offset);
            });
            
            // usual tooltips
            
            $('.tooltip').not('#welcome .tooltip').tooltipster();
            
            $('#welcome .tooltip').tooltipster({
                theme: 'tooltipster-light'
            });
            
            // demos
            
            $('#demo-default').tooltipster({});
            
            $('#demo-smart').draggable({
                grid: [30, 30],
                helper: 'clone',
                revert: true,
                scroll: false,
                start: function(event, ui) {
                    ui.helper
                        .tooltipster({
                            content: 'Move my origin next to the edges of the screen and see how I adapt.<br />Besides, there are several options to tune my behavior.',
                            contentAsHTML: true,
                            trackerInterval: 10,
                            trackOrigin: true,
                            trigger: 'custom'
                        })
                        .tooltipster('open');
                },
                stop: function(event, ui) {
                    ui.helper.tooltipster('destroy');
                }
            });
            
            $('#demo-html').tooltipster({
                // setting a same value to minWidth and maxWidth will result in a fixed width
                maxWidth: 400,
                side: 'right'
            });
            
            $('#demo-theme').tooltipster({
                animation: 'grow',
                theme: 'tooltipster-pink'
            });
            
            $('#demo-callback').tooltipster({
                content: 'Loading...',
                updateAnimation: false,
                functionBefore: function(instance, helper) {
                    
                    var $origin = $(helper.origin);
                    
                    if ($origin.data('ajax') !== 'cached') {
                        
                        $.jGFeed(
                            'http://ws.audioscrobbler.com/2.0/user/ce3ge/recenttracks.rss?',
                            function(feeds){
                                
                                if(!feeds){
                                    instance.content('Woops - there was an error retrieving my last.fm RSS feed');
                                }
                                else {
                                    
                                    instance.content($('<span>I last listened to: <strong>' + feeds.entries[0].title + '</strong></span>'));
                                    
                                    $origin.data('ajax', 'cached');
                                }
                            },
                            10
                        );
                        
                        $origin.data('ajax', 'cached');
                    }
                },
                functionAfter: function(instance) {
                    alert('The tooltip has closed!');
                }
            });
            
            $('#demo-events').tooltipster({
                trigger: 'click'
            });
            
            /*
            // for testing purposes
            var instance = $('#demo-events').tooltipster('instance');
            instance.on('reposition', function(){
                alert('hey');
            });
            */
            
            $(window).keypress(function() {
                $('#demo-events').tooltipster('hide');
            });
            
            $('#demo-interact').tooltipster({
                contentAsHTML: true,
                interactive: true
            });
            
            $('#demo-touch').tooltipster({
                trigger: 'click',
                functionBefore: function(instance, helper){
                    if (helper.event.type == 'click') {
                        instance.content('You opened me with a regular mouse click :)');
                    }
                    else {
                        instance.content('You opened me by a tap on the screen :)');
                    }
                }
            });
            $('#demo-imagemaparea').tooltipster();
            
            $('#demo-multiple').tooltipster({
                animation: 'swing',
                content: 'North',
                side: 'top',
                theme: 'tooltipster-borderless'
            });
            $('#demo-multiple').tooltipster({
                content: 'East',
                multiple: true,
                side: 'right',
                theme: 'tooltipster-punk'
            }); 
            $('#demo-multiple').tooltipster({
                animation: 'grow',
                content: 'South',
                multiple: true,
                side: 'bottom',
                theme: 'tooltipster-light'
            }); 
            $('#demo-multiple').tooltipster({
                animation: 'fall',
                content: 'West',
                multiple: true,
                side: 'left',
                theme: 'tooltipster-shadow'
            });
            
            var complexInterval;
            
            $('#demo-complex')
                .tooltipster({
                    trackerInterval: 15,
                    trackOrigin: true,
                    trigger: 'custom'
                })
                .click(function(){
                    
                    var $this = $(this);
                    
                    if($this.hasClass('complex')){
                        
                        $this
                            .removeClass('complex')
                            .tooltipster('hide')
                            .css({
                                left: '',
                                top: ''
                            });
                        
                        clearInterval(complexInterval);
                    }
                    else {
                        
                        var bcr = this.getBoundingClientRect(),
                            odd = true;
                        
                        $this
                            .addClass('complex')
                            .css({
                                left: bcr.left + 'px',
                                top: bcr.top + 'px'
                            })
                            .tooltipster('show');
                        
                        complexInterval = setInterval(function(){
                            
                            var offset = odd ? 200 : 0;
                            
                            $this.css({
                                left: bcr.left + offset
                            });
                            
                            odd = !odd;
                        }, 2000);
                    }
                });
            
            $('#demo-position').tooltipster({
                // 8 extra pixels for the arrow to overflow the grid
                functionPosition: function(instance, helper, data){
                    
                    // this function is pretty dumb and does not check if there is actually
                    // enough space available around the tooltip to move it, it just makes it
                    // snap to the grid. You might want to do something smarter in your app!
                    
                    var gridBcr = $('#demo-position-grid')[0].getBoundingClientRect(),
                        arrowSize = parseInt($(helper.tooltipClone).find('.tooltipster-box').css('margin-left'));
                    
                    // override these
                    data.coord = {
                        // move the tooltip so the arrow overflows the grid
                        left: gridBcr.left - arrowSize,
                        top: gridBcr.top
                    };
                    
                    return data;
                },
                maxWidth: 228,
                side: ['right']
            });
            
            $('#demo-plugin').tooltipster({
                plugins: ['follower']
            });
            
            // nested demo
            $('#nesting').tooltipster({
                content: $('<span>Hover me too!</span>'),
                functionReady: function(instance){
                    
                    // the nested tooltip must be initialized once the first
                    // tooltip is open, that's why we do this inside
                    // functionReady()
                    instance.content().tooltipster({
                        content: 'I am a nested tooltip!',
                        distance: 0
                    });
                },
                interactive: true
            });
            
            // grouped demo
            $('.tooltip_slow').tooltipster({
                animationDuration: 1000,
                delay: 1000
            });
            
            $.tooltipster.group('tooltip_group');
            
            // themes
            
            $('.tooltipster-light-preview').tooltipster({
                theme: 'tooltipster-light'
            });
            $('.tooltipster-borderless-preview').tooltipster({
                theme: 'tooltipster-borderless'
            });
            $('.tooltipster-punk-preview').tooltipster({
                theme: 'tooltipster-punk'
            });
            $('.tooltipster-noir-preview').tooltipster({
                theme: 'tooltipster-noir'
            });
            $('.tooltipster-shadow-preview').tooltipster({
                theme: 'tooltipster-shadow'
            });
            
            // prettyPrint();
        });
        </script>
    </body>
</html>